<template>
  <div>
    <el-container>
      <el-header>
        <div class="con">
          <span class="title" >易小聘后台管理系统</span>
          <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
          <span class="operate"></span>
          <el-button type="info" icon="el-icon-switch-button" circle @click="adminLoginOut">
          </el-button>
        </div>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <adminMenu />
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
  import adminMenu from '../menu/adminMenu'
  export default {
    name: "admin-work",
    components:{
      adminMenu
    },
    data() {
      return {
        editableTabsValue: '2',
        editableTabs: [{
          title: 'Tab 1',
          name: '1',
          content: 'Tab 1 content'
        }, {
          title: 'Tab 2',
          name: '2',
          content: 'Tab 2 content'
        }],
        tabIndex: 2
      }
    },
    methods: {
      adminLoginOut() {
        this.$store.dispatch("setAdmin",{});
        this.isUser = false;
        window.sessionStorage.removeItem("admin");
        this.$router.push("/adminLogin")
      },
      removeTab(targetName) {
        let tabs = this.editableTabs;
        let activeName = this.editableTabsValue;
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              let nextTab = tabs[index + 1] || tabs[index - 1];
              if (nextTab) {
                activeName = nextTab.name;
              }
            }
          });
        }
        this.editableTabsValue = activeName;
        this.editableTabs = tabs.filter(tab => tab.name !== targetName);
      }
    }
  }
</script>

<style scoped>
  .el-avatar--circle {
    border-radius: 50%;
    /* display: inline-block; */
    position: absolute;
    right: 150px;
    top: 15px;
  }
  .el-button{
    position: absolute;
    right: 80px;
    top: 15px;
  }
  .el-container {
    height: 100vh;
    min-height: 600px;
  }

  .el-header {
    background-color: #314057;
    line-height: 75px;
    height: 75px !important;
  }
  .el-aside{
    width: 220px !important;
    height: 100%;
    background-color: #545c64;
  }

  .el-main{
    padding: 10px !important;
  }
  .operate{
    color: #fff;
    position: absolute;
    right: 200px;
    font-size: 0.8em;
    font-weight: bold;
  }
  .con .title{
    font-weight: bold;
    font-size: 1.5em;
    color: #fff;
  }
</style>